<script>
import Header from "@/components/Header.vue";
import http from "@/api/http";
import FloatingAiAssistant from "@/components/FloatingAiAssistant.vue";
export default {
  name: "HeadPage",
  components:{
    Header,
    FloatingAiAssistant,
  },
  methods:{
    async downLoadExcel() {
      try {
        const response = await http.get("/api/export/all/excel", {
          responseType: "blob"
        });

        const blob = new Blob([response], { type: "application/octet-stream" });
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = downloadUrl;
        link.download = "project.xlsx";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(downloadUrl);
        this.$message.success("Excel 下载成功");
      } catch (error) {
        console.error("下载 Excel 文件失败", error);
        this.$message.error("Excel 下载失败");
      }
    },
    async downLoadLogs() {
      try {
        const response = await http.get("/api/export/logs", {
          responseType: "blob"
        });

        const blob = new Blob([response], { type: "application/octet-stream" });
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = downloadUrl;
        link.download = "sys_logs.xlsx";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(downloadUrl);
        this.$message.success("日志下载成功");
      } catch (error) {
        console.error("下载日志文件失败", error);
        this.$message.error("日志下载失败");
      }
    }
  }
}
</script>

<template>
  <div>
    <Header></Header>
    <div class="head">
      <div>
        <router-link tag="button" class="select-nav" active-class="active" to="/CheckerHead/CheckerProjectList/CheckerDoing">列表</router-link>
        <router-link tag="button" class="select-nav" active-class="active" to="/CheckerHead/CheckerMember">成员</router-link>
        <router-link tag="button" class="select-nav" active-class="active" to="/CheckerHead/CheckChart">可视化</router-link>
        <router-link tag="button" class="select-nav" active-class="active" to="/CheckerHead/CheckPage">审查</router-link>
      </div>
      <div class="button-group">
        <el-button type="text" style="font-size: 16px;" @click="downLoadExcel">下载 Excel<i class="el-icon-download el-icon--right"></i></el-button>
        <el-button type="text" style="font-size: 16px;" @click="downLoadLogs">导出日志<i class="el-icon-download el-icon--right"></i></el-button>
      </div>
    </div>
    <div class="back">
      <div class="back-two">
        <FloatingAiAssistant />
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<style>
.head {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中对齐 */
}

.button-group {
  display: flex;
  gap: 20px;
  margin-right: 80px;
}

.back{
  padding: 50px;
  background: linear-gradient(90deg, #61B7CF, #8E6DD7);
}
.back-two{
  background: white;
  border-radius: 12px;
}
.select-nav{
  color: black;
  background: white;
  box-sizing: border-box;
  height: 50px;
  width: 120px;
  font-size: 18px;
  border: white;
}
.active {
  text-decoration: none;
  background: white;
  color: cornflowerblue;
  height: 50px;
  width: 120px;
  border: white;
  font-weight: 800;
}
</style>